<template>
  <div class="box">
    <div class="left">
      <div class="top">
        <div class="topson1">
          <div class="headportrait">
            <img src="../img/QQ图片20230403163144.jpg" alt="">
          </div>
          <div class="topson1text">
            <p>EasonChan</p>
            <span>超级管理员</span>
          </div>
        </div>
        <div class="bottomtext">
          <p>
            最近登录时间:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{
              $store.state.LatesTime }}</span>
          </p>
          <p>
            上次登录地点:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>成都</span>
          </p>
        </div>
      </div>
      <div class="bottom">
        <el-table :data="Salesstatement" style="width: 95%">
          <el-table-column prop="phone" label="手机" width="140">
          </el-table-column>
          <el-table-column prop="todaybuy" label="今日购买" width="140">
          </el-table-column>
          <el-table-column prop="monthbuy" label="本月购买" width="140">
          </el-table-column>
          <el-table-column prop="allbuy" label="总购买" width="140">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="son">
          <div class="icon1">
            <i class="el-icon-success"></i>
          </div>
          <div class="content">
            <p class="price">￥122</p>
            <p class="indent">今日支付订单</p>
          </div>
        </div>
        <div class="son">
          <div class="icon2">
            <i class="el-icon-star-on"></i>
          </div>
          <div class="content">
            <p class="price">￥21</p>
            <p class="indent">今日收藏订单</p>
          </div>
        </div>
        <div class="son">
          <div class="icon3">
            <i class="el-icon-s-goods"></i>
          </div>
          <div class="content">
            <p class="price">￥13</p>
            <p class="indent">今日未支付订单</p>
          </div>
        </div>
        <div class="son">
          <div class="icon1">
            <i class="el-icon-success"></i>
          </div>
          <div class="content">
            <p class="price">￥3834</p>
            <p class="indent">本月支付订单</p>
          </div>
        </div>
        <div class="son">
          <div class="icon2">
            <i class="el-icon-star-on"></i>
          </div>
          <div class="content">
            <p class="price">￥660</p>
            <p class="indent">本月收藏订单</p>
          </div>
        </div>
        <div class="son">
          <div class="icon3">
            <i class="el-icon-s-goods"></i>
          </div>
          <div class="content">
            <p class="price">￥120</p>
            <p class="indent">本月未支付订单</p>
          </div>
        </div>
      </div>
      <!-- 折线图 -->
      <div class="start">
        <div id="lineChart">
        </div>
      </div>
      <div class="bottom">
        <!-- 柱状图 -->
        <div class="boxson">
          <div id="histogram">
          </div>
        </div>
        <div class="boxson">
          <!-- 饼图 -->
          <div id="pieChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts';
export default {
  data() {
    return {
      Salesstatement: [
        {
          phone: 'iphone',
          todaybuy: 1700,
          monthbuy: 3200,
          allbuy: 50000
        }, {
          phone: 'xiaomi',
          todaybuy: 1200,
          monthbuy: 6500,
          allbuy: 45000
        }, {
          phone: 'vivo',
          todaybuy: 300,
          monthbuy: 2200,
          allbuy: 24000
        }, {
          phone: 'oppo',
          todaybuy: 500,
          monthbuy: 3500,
          allbuy: 22000
        }, {
          phone: '华为',
          todaybuy: 700,
          monthbuy: 4200,
          allbuy: 60000
        }, {
          phone: '三星',
          todaybuy: 300,
          monthbuy: 2000,
          allbuy: 34000
        }
      ],
    }
  },
  //计算属性
  computed: {

  },
  //监听
  watch: {

  },
  //方法
  methods: {
  },
  //组件
  components: {

  },
  // 生命周期
  mounted() {
    // 折线图
    var mylineChart = echarts.init(document.getElementById('lineChart'));
    var option = {
      title: {
        text: "近七天出货量",
        bottom: '10px',
        right: '43%',
        subtextStyle: {
          transform: `translateX(-50 %)`,
        }
      },
      tooltip: {},
      legend: {
        data: this.$store.state.mobilePhoneManufacturer
      },
      xAxis: {
        data: this.$store.state.lastSevenDays
      },
      yAxis: {},
      series: [
        {
          name: 'xiaomi',
          type: 'line',
          data: this.$store.state.mylineChart_data.xiaomi,
          stack: 'x'
        }, {
          name: 'oppo',
          type: 'line',
          data: this.$store.state.mylineChart_data.oppo,
          stack: 'x'
        }, {
          name: '华为',
          type: 'line',
          data: this.$store.state.mylineChart_data.huawei,
          stack: 'x'
        }, {
          name: 'vivo',
          type: 'line',
          data: this.$store.state.mylineChart_data.vivo,
          stack: 'x'
        }, {
          name: 'iphone',
          type: 'line',
          data: this.$store.state.mylineChart_data.iphone,
          stack: 'x'
        }, {
          name: '三星',
          type: 'line',
          data: this.$store.state.mylineChart_data.sansong,
          stack: 'x'
        }
      ]
    };
    mylineChart.setOption(option)
    //柱状图
    var myhistogram = echarts.init(document.getElementById('histogram'));
    var histogramOpyion = {
      legend: {
        data: this.$store.state.User
      },
      xAxis: {
        data: this.$store.state.histogramDays
      },
      yAxis: {
      },
      series: [
        {
          type: 'bar',
          name: '新增用户',
          BarGap: '20%',
          barCategoryGap: '40%',
          data: this.$store.state.histogramData.newUsers,
        },
        {
          type: 'bar',
          data: this.$store.state.histogramData.activeUsers,
          name: '活跃用户',

        }
      ]
    }
    myhistogram.setOption(histogramOpyion)
    // 饼图
    var mypieChart = echarts.init(document.getElementById('pieChart'));
    var mypieChartOpyion = {
      legend: {
        orient: 'vertical',
        x: 'left',
        data: ['小米', 'iphone', 'vivo', 'oppo', '华为', '三星']
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 200,
              name: '小米'
            },
            {
              value: 450,
              name: 'iphone'
            },
            {
              value: 300,
              name: 'vivo'
            },
            {
              value: 400,
              name: 'oppo'
            },
            {
              value: 500,
              name: '华为'
            },
            {
              value: 264,
              name: '三星'
            }
          ],
          roseType: 'arse'
        }
      ]
    }
    mypieChart.setOption(mypieChartOpyion)
  },
  created() {
  },
}
</script>

<style lang="less" scoped>
.box {
  // margin: auto;
  display: flex;
  justify-content: space-between;
  width: 88vw;
  height: 85vh;
  // outline: 1px solid black;

  .left {
    margin-top: 40px;
    width: 600px;
    height: 70vh;
    // outline: 1px solid red;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .top {
      border-radius: 3px;
      width: 600px;
      height: 30vh;
      outline: 1px solid #9d9fa32d;
      background-color: #fff;
      color: #303133;
      transition: all 0.2s linear;

      .topson1 {
        margin: auto;
        width: 500px;
        height: 20vh;
        display: flex;
        margin-top: 20px;
        border-bottom: 1px solid #ccc;

        .headportrait {
          width: 150px;
          height: 150px;
          border-radius: 50%;
          overflow: hidden;
          margin-top: 20px;
        }

        .headportrait>img {
          width: 100%;
          height: 100%;
        }

        .topson1text {
          text-align: center;
          width: 150px;
          height: 150px;
          margin-top: 20px;

          p {
            font-size: 32px;
            font-weight: 300px;
            margin-top: 40px;
            margin-left: 10px;
          }

          span {
            color: #999999;
            font-size: 15px;
          }
        }
      }

      .bottomtext {
        margin: auto;
        width: 500px;
        height: 20vh;
        margin-top: 20px;

        p {
          color: #999;
          font-size: 14px;
          line-height: 28px;

          span {
            color: #666;
          }
        }
      }
    }

    .top:hover {
      box-shadow: 0px 0px 20px 0px #9d9fa383;
    }

    .bottom {
      border-radius: 3px;
      width: 600px;
      height: 37vh;
      outline: 1px solid #9d9fa32d;
      background-color: #fff;
      transition: all 0.2s linear;

      .el-table {
        margin-left: 20px;
      }
    }

    .bottom:hover {
      box-shadow: 0px 0px 20px 0px #9d9fa383;
    }
  }

  .right {
    margin-top: 40px;
    width: 1000px;
    height: 70vh;
    // outline: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .top {
      width: 1000px;
      height: 19vh;
      // outline: 1px solid red;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      color: #303133;

      .son {
        display: flex;
        border-radius: 3px;
        background-color: #fff;
        width: 310px;
        height: 80px;
        transition: all 0.2s linear;
        outline: 1px solid #9d9fa32d;

        // outline: 1px solid red;
        .icon1 {
          // 内容垂直水平居中
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30px;
          color: #fff;
          width: 80px;
          height: 80px;
          background-color: rgb(46, 199, 201);
        }

        .icon2 {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30px;
          color: #fff;
          width: 80px;
          height: 80px;
          background-color: rgb(255, 185, 128);
        }

        .icon3 {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30px;
          color: #fff;
          width: 80px;
          height: 80px;
          background-color: rgb(90, 177, 239);
        }

        .content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 10px;
          width: 150px;
          height: 80px;

          .price {
            font-size: 25px;
            color: #303133;
          }

          .indent {
            font-size: 12px;
            color: #999;
          }
        }

      }

      .son:hover {
        box-shadow: 0px 0px 20px 0px #9d9fa383;
      }

      .son:nth-child(4) {
        margin-top: 22px;
      }

      .son:nth-child(5) {
        margin-top: 22px;
      }

      .son:nth-child(6) {
        margin-top: 22px;
      }
    }


    .start {
      border-radius: 3px;
      width: 1000px;
      height: 24vh;
      // outline: 1px solid red;
      outline: 1px solid #9d9fa32d;
      background-color: #fff;
      color: #303133;
      transition: all 0.2s linear;
      display: flex;
      justify-content: center;
      align-items: center;

      #lineChart {
        width: 1000px;
        height: 230px;
      }
    }

    .start:hover {
      box-shadow: 0px 0px 20px 0px #9d9fa383;
    }

    .bottom {
      border-radius: 3px;
      width: 1000px;
      height: 20vh;
      display: flex;
      justify-content: space-between;

      // outline: 1px solid red;
      .boxson {
        width: 450px;
        height: 20vh;
        background-color: #fff;
        // outline: 1px solid black;
        outline: 1px solid #9d9fa32d;
        color: #303133;
        transition: all 0.2s linear;

        #histogram {
          width: 450px;
          height: 230px;
        }

        #pieChart {
          width: 450px;
          height: 195px;
        }
      }

      .boxson:hover {
        box-shadow: 0px 0px 20px 0px #9d9fa383;
      }
    }


  }
}
</style>